<template>
  <gui-page
    ref="pageRef"
    :api-loading-status="apiLoadingStatus"
    :custom-footer="true"
    :custom-header="true"
    :full-page="true"
    :is-loading="pageLoading"
    :status-bar-class="['gui-bg-white']"
  >
    <template #gHeader>
      <view class="gui-flex gui-nowrap gui-rows gui-align-items-center gui-bg-white gui-border-b" style="height: 44px">
        <!-- 导航文本此处也可以是其他自定义内容 -->
        <gui-header-leading :home="false" />
        <text class="gui-h5 gui-flex1 gui-text-center gui-ellipsis gui-primary-text">优惠券</text>
        <!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
        <view style="width: 120rpx" />
      </view>
    </template>
    <template #gBody>
      <view class="gui-flex gui-column gui-padding">
        <!--   数据列表     -->
        <view
          v-for="(item, index) in list"
          :key="index"
          :data-btn="item.btn"
          :data-number="item.number"
          style="margin-top: 25rpx"
          @tap="getIt(index)"
        >
          <gui-coupons :coupon="item" />
        </view>
      </view>
    </template>
  </gui-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const pageRef = ref<any>(null)
// 页面加载
const pageLoading = ref<boolean>(false)
// 页码
const page = ref<number>(1)
// 用于记录是否有 api 请求正在执行
const apiLoadingStatus = ref<boolean>(false)

const list = ref<Array<any>>([
  {
    color: '#9F6DFA',
    height: '180rpx',
    unit: '￥',
    number: 5,
    txt: '满50元可用',
    title: '全场通用券',
    desc: '有效期至 2018-05-20',
    btn: '领取',
    drawed: '已抢2100张',
  },
  {
    color: '#FF3456',
    height: '180rpx',
    unit: '￥',
    number: 10,
    txt: '满50元可用',
    title: '电器专场用券',
    desc: '有效期至 2018-05-28',
    btn: '已领取',
    drawed: '已抢2800张',
  },
  {
    color: '#FF8830',
    height: '180rpx',
    unit: '￥',
    number: 100,
    txt: '满500元可用',
    title: '服饰专场用券',
    desc: '有效期至 2018-05-28',
    btn: '领券',
  },
])

const getIt = (index: number) => {
  console.log(index)
}
</script>

<style scoped></style>
